<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			window.onload = function() {
				var cars = ["奔驰1", "宝马1", "奥迪1"]; 
				var ul = document.createElement("ul");
				for (var i in cars) {
					console.log(i);
					var li = document.createElement("li");
					var txt = document.createTextNode(cars[i]);
					li.appendChild(txt);
					ul.appendChild(li);
					
					li.addEventListener("mouseover", function() {
						this.style.backgroundColor = "gray";
					});
					li.addEventListener("mouseout", function() {
						this.style.backgroundColor = "";
					});
				}
				document.body.appendChild(ul);
			}
			
			window.onload = function () {
				var cars = ["奔驰", "宝马", "奥迪"]; 
				var ul = document.createElement("ul");
				for (var i in cars) {
					console.log(i);
					var li = document.createElement("li");
					var txt = document.createTextNode(cars[i]);
					li.appendChild(txt);
					ul.appendChild(li);
					
					li.addEventListener("mouseover", function() {
						this.style.backgroundColor = "gray";
					});
					li.addEventListener("mouseout", function() {
						this.style.backgroundColor = "";
					});
				}
				document.body.appendChild(ul);
			}
		</script>
	</head>
	<body>
		<!--
		<ul>
			<li style="background-color: gray;">奔驰</li>
			<li>宝马</li>
		</ul>
		-->
	</body>
</html>
